<template>
  <div class="init">
    <!--  -->
    <div class="conf-wrap" :loading="loading">
      <div class="conf-wrap_img">
        <img src="@/assets/images/logo.png" width="78" height="20" alt="" />
      </div>
      <div v-if="step === 1" class="conf-wrap_step_tip">
        <div class="conf-wrap_step_tip_title">欢迎使用 CDN 管理系统</div>
        <div class="conf-wrap_step_tip_subtitle">
          完成简单配置，立即使用服务
        </div>
      </div>
      <div v-if="step === 1" class="conf-wrap_step_button">
        <a-button
          type="primary"
          size="large"
          class="w-full h-12!"
          @click="step = 2">
          开始配置
        </a-button>
      </div>
      <div v-if="step === 2" class="conf-wrap_step_form w-full">
        <a-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          layout="vertical">
          <a-form-item label="主控通信地址" field="mgr_addr" hide-asterisk>
            <template #label>
              <div class="flex gap-x-1 items-center">
                <span>主控通信地址</span>
                <!-- <a-tooltip :content-style="{ 'max-width': '509px' }">
                  <i-icons-question />
                  <template #content>
                    <span> 支持IP和域名</span>
                  </template>
                </a-tooltip> -->
              </div>
            </template>
            <a-input
              v-model="formData.mgr_addr"
              placeholder="请输入主控通信地址" />
          </a-form-item>
          <a-form-item label="账号" field="username" hide-asterisk>
            <a-input
              v-model="formData.username"
              :max-length="18"
              placeholder="请输入账号" />
          </a-form-item>
          <a-form-item
            field="password"
            label="密码"
            validate-trigger="blur"
            asterisk-position="end"
            hide-asterisk>
            <a-input-password
              v-model.trim="formData.password"
              placeholder="请输入密码"
              :max-length="20"
              class="cloud-pwd-icon"
              :input-attrs="{ autocomplete: 'off' }"
              @input="
                (value: string) =>
                  (formData.password = value.replace(/\s/g, ''))
              " />
          </a-form-item>
          <a-form-item label="确认密码" field="password_confirm" hide-asterisk>
            <a-input-password
              v-model.trim="formData.password_confirm"
              placeholder="请再次输入密码"
              :max-length="20"
              class="cloud-pwd-icon"
              :input-attrs="{ autocomplete: 'off' }"
              @input="
                (value: string) =>
                  (formData.password_confirm = value.replace(/\s/g, ''))
              " />
          </a-form-item>
        </a-form>
      </div>
      <div v-if="step === 2" class="conf-wrap_step_button">
        <a-button
          type="primary"
          size="large"
          class="w-full h-12!"
          @click="handleOk">
          完成配置
        </a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { postApiSystemInstallApi } from '@/apis/modules/system'
import { type FieldRule, type FormInstance } from '@arco-design/web-vue'
import { useAppStore } from '../../stores/app'
const step = ref<number>(1)
const formRef = ref<FormInstance>()
const formData = reactive({
  mgr_addr: '',
  username: '',
  password: '',
  password_confirm: ''
})

const rules = computed<Record<string, FieldRule[]>>(() => {
  const res: Record<string, FieldRule[]> = {
    mgr_addr: [
      { required: true, message: '请输入主控通信地址' },
      {
        validator: validateMasterAddr
      }
    ],
    username: [
      { required: true, message: '请输入账号' },
      {
        validator: validateAccount
      }
    ],
    password: [
      {
        required: true,
        validator: validatePassword
      }
    ],
    password_confirm: [
      {
        required: true,
        validator(value, callback) {
          if (!value) {
            return callback('请再次输入密码')
          }

          if (value !== formData.password) {
            return callback('两次密码输入不一致')
          }
          return callback()
        }
      }
    ]
  }
  return res
})
const loading = ref(false)

const appStore = useAppStore()

const handleOk = async () => {
  const error = await formRef.value?.validate()
  if (error) return false
  loading.value = true
  postApiSystemInstallApi(formData)
    .then(() => {
      formRef.value?.resetFields()
      ToastUtils.success('操作成功')
      appStore.clearLoginInfoAction()
    })
    .catch(() => {
      loading.value = false
    })
}

onMounted(() => {
  formData.mgr_addr = window.location.origin
})
</script>
<style lang="less" scoped>
.init {
  width: 100%;
  height: 100%;
  //background-color: rgb(var(--primary-1));
  background: var(---color-fill-2, #f2f3f5);
  .conf-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 520px;

    flex-direction: column;
    align-items: center;
    gap: 64px;

    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid #fff;
    background: var(---color-bg-white, #fff);
    box-shadow: 0px 10px 50px 0px rgba(92, 105, 129, 0.05);
    overflow: hidden;

    .conf-wrap_img {
      width: 520px;
      //height: 120px;
      background: url(../../assets/images/init-bg.png) no-repeat center center;
      background-size: cover;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      align-self: stretch;
      padding: 80px 88px 0px 88px;
    }

    .conf-wrap_step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      align-self: stretch;
      .conf-wrap_step_title {
      }
    }

    .conf-wrap_step_form {
      display: flex;
      padding: 0px 88px 0px 88px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      align-self: stretch;
    }

    .conf-wrap_step_tip {
      display: flex;
      padding: 0px 88px 0px 88px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 12px;
      align-self: stretch;
      .conf-wrap_step_tip_title {
        color: var(---color-text-1, #1d2129);
        font-size: 20px;
        font-weight: 700;
        line-height: 28px; /* 140% */
      }
      .conf-wrap_step_tip_subtitle {
        color: var(---color-text-3, #646a73);
        font-size: 14px;
        line-height: 22px; /* 157.143% */
      }
    }
    .conf-wrap_step_button {
      display: flex;
      //padding: 16px 56px 56px 56px;
      padding: 0px 88px 40px 88px;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      align-self: stretch;
    }
  }
}
</style>
